<template>
  <div ref="echartDom"></div>
</template>

<script setup lang="ts">
import { inject, ref, reactive, shallowRef, onMounted, onUnmounted, watchEffect } from "vue";
import { pxToRem } from "@/utils/index";

// 接收参数
const props = defineProps({
  housingSupplyStatsData: {
    type: Object,
    default: () => {},
  },
});
// 数据定义
const chartsData = reactive<any>({
  legendData: [],
  xAxisData: [],
  yAxisData: [],
  seriesData: [],
});
const echartDom = ref<null | HTMLDivElement>(null);
const myChart = shallowRef<null | any>(null);
const echarts = inject<any>("echarts");

// echarts初始化渲染
chartsData.legendData = props.housingSupplyStatsData.legendData;
chartsData.xAxisData = props.housingSupplyStatsData.xAxisData;
chartsData.yAxisData = props.housingSupplyStatsData.yAxisData;
chartsData.seriesData = props.housingSupplyStatsData.seriesData;
const colors = props.housingSupplyStatsData.colors;
const legendSty = props.housingSupplyStatsData.legendStyle;
const gridSty = props.housingSupplyStatsData.gridConfig;

const getEchart = () => {
  if (echartDom.value) {
    myChart.value = echarts.init(echartDom.value);

    const tooltipLineStyle = {
      type: "line",
      lineStyle: {
        color: "rgba(40,252,255,0.6)",
        shadowBlur: 10,
        shadowColor: "rgba(0, 0, 0, 0.9)",
      },
    };

    const legendStyle = {
      show: legendSty.show,
      icon: legendSty.icon,
      left: pxToRem(legendSty.left),
      right: pxToRem(legendSty.right),
      top: pxToRem(legendSty.top),
      itemWidth: pxToRem(legendSty.itemWidth),
      itemHeight: pxToRem(legendSty.itemHeight),
      itemGap: pxToRem(legendSty.itemGap),
      textStyle: {
        color: "#fff",
        fontSize: pxToRem(12),
        rich: {},
        padding: [0, 0, pxToRem(-3), 0],
      },
      data: chartsData.legendData,
    };

    // 网格区域
    const gridConfig = {
      left: gridSty.left,
      right: gridSty.right,
      bottom: gridSty.bottom,
      top: gridSty.top,
      containLabel: true,
    };

    const xAxisConfig = {
      boundaryGap: true,
      data: chartsData.xAxisData,
      axisTick: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          color: "#FFFFFF",
          fontSize: pxToRem(12),
        },
      },
    };

    // y轴配置
    const yAxisConfig = chartsData.yAxisData.map((item: any) => ({
      type: "value",
      name: item.name,
      nameTextStyle: {
        color: "#959699",
        fontSize: pxToRem(12),
      },
      splitLine: {
        show: item.type == 2 ? false : true,
        lineStyle: {
          color: "#31679C",
          type: "dashed",
        },
      },
      axisLabel: {
        formatter: "{value}",
        color: "#959699",
        fontSize: pxToRem(12),
      },
    }));

    const seriesConfig = chartsData.seriesData.map((data: any, index: string | number) => ({
      name: chartsData.legendData[index],
      type: "boxplot",
      data: data,
      itemStyle: {
        borderColor: colors[index].borderColor,
        borderWidth: 1,
        color: colors[index].color,
      },
    }));

    const option = {
      tooltip: {
        axisPointer: tooltipLineStyle,
        textStyle: {
          color: "#fff",
          fontSize: pxToRem(18),
        },
        backgroundColor: "rgba(8, 64, 132, 0.9)",
      },
      legend: legendStyle,
      grid: gridConfig,
      xAxis: xAxisConfig,
      yAxis: yAxisConfig,
      series: seriesConfig,
    };

    myChart.value.setOption(option);
  }
};

const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  props.housingSupplyStatsData;
  chartsData.legendData = props.housingSupplyStatsData.legendData;
  chartsData.xAxisData = props.housingSupplyStatsData.xAxisData;
  chartsData.yAxisData = props.housingSupplyStatsData.yAxisData;
  chartsData.seriesData = props.housingSupplyStatsData.seriesData;
  getEchart();
};

watchEffect(() => {
  updateChart();
});

onMounted(() => {
  getEchart();
  window.addEventListener("resize", updateChart);
});

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
});
</script>
